<template>
  <div class="footer">
    <div class="footerMain">
      <div class="date"
           id="time"></div>
      <p class="copyright">Copy Right © Bossien All Rights Reserved 武汉博晟安全技术股份有限公司 版权所有</p>
      <router-link to='service'
                   class="serviceTo">博晟客服中心</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      time1:null
    }
  },
  mounted(){
       this.time1 = setInterval(() =>{ 
            document.getElementById("time").innerHTML = this.time()
        }, 1000)
  },
  destroyed(){
       clearInterval( this.time1)
  },
  methods: {
    time () {
        var vWeek, vWeek_s, vDay;
        vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        vWeek_s = date.getDay();
        return (year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s])
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.footer {
  height: 40px;
  background: #f3f3f3;
  margin-top: -40px;
  font-size: 12px;
  color: #888888;
  .footerMain {
    position: relative;
    .date{
        position: absolute;
        left: 45px;
        line-height: 40px;
        background: url('../../../static/images/date_icon.png') no-repeat left center;
        padding-left: 25px;
    }
    .copyright {
      line-height: 40px;
      text-align: center;
    }
    .serviceTo {
      position: absolute;
      color: #888888;
      right: 45px;
      top: 0;
      line-height: 40px;
      background: url("../../../static/images/customer_icon.png") no-repeat left
        11px;
      padding-left: 30px;
    }
    .serviceTo:hover {
      opacity: 0.8;
    }
  }
}
</style>
